gsap.to('.box', {
    scrollTrigger: {
        trigger: '.box', // box元素进入视口时触发
        /*
         markers: 开发期间标记，显示动画滚动开始结束的位置，，markers: true 默认值： {startColor: "green", endColor: "red", fontSize: "16px", fontWeigth: "normal", indent: 0} 可自定义其样式。
        */
        markers: { startColor: "green", endColor: "red", fontSize: "12px" },
        start: 'top 30%', // 动画开始位置，滚动到距视口顶部30%
        end: 'top 20%', // 动画结束位置，滚动到距视口顶部20%
        // pin: true, // 在动画区域内，这个元素的位置固定不动，会在底部添加padding
        // pinSpacing: false, // pin的元素不在底部添加padding 
        /* 
        scrub: Boolean | Number 
         将动画的进度直接链接到滚动条上
        */
        scrub: true,

        onEnter: () => {
            console.log('滚动到start位置触发')
        },
        onEnterBack: () => {
            console.log('滚动超过end位置，再进入滚动区域触发')
        },
        onLeave: () => {
            console.log('滚出end位置时触发')
        },
        onLeaveBack: () => {
            console.log('滚出end位置，再滚回来超过start位置触发')
        },
        onUpdate: (self) => { // 在start和end区域内滚动位置改变时触发
            console.log(self)
        },
        /*
        toggleAction: onEnter onLeave onBackEnter onBackLeave
        在onEnter onLeave onBackEnter onBackLeave这四个位置的动画的方式
        默认是： play none none none
        可以使用的关键字有： play（播放）, pause（暂停）, resume（恢复）, reset（重置）, restart（重新开始）, complete（完成）, reverse（倒退）, none(无).
         */
        toggleAction: "play pause resume reset",
        /* 
        toggleClass: String | Object 
        */
        toggleClass: { targets: '.box', className: 'box-pink' }
    },
    x: 100,// normal value
    /**
    * 可以通过函数获取值
    * @param {*} index :跟.box数量有关，如box有两个,index 分别为 0 1
    * @param {*} target : .box类的元素
    * @param {*} targets : 数组
    * @returns
    */
    y: function (index, target, targets) {
        //function-based value
        return index * 50;
    },
})